<template>
	<view style="min-height: 100vh;background-color: #F0E3CE;" class="Afont"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">

		<view class="zinde">
			<view class="" style="padding: 105rpx 20rpx 0;position: relative;z-index: 99;" @click="back">
				<image class="w-80 h-80 margin-top-10" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit">
				</image>
			</view>
		</view>

		<view style="width: 100%;height: 750rpx;sition: relative;overflow: hidden;">
			<view class="text-center" style="position: absolute;left:25%;top:13%;
		width: 350upx;height: 78upx;color: #F9FADA;"
				:style="{background:'url('+Imgbase+'/new_goodcase_img1.png)','background-size':'100% 100%',}">
				<view style="transform: rotate(-2deg);line-height: 70upx;font-size: 36rpx;">{{name}}</view>
			</view>
			<view style="position: absolute;left: 0%;top: 18%;width: 100%;">
				<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
					<view class="tower-item" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft,
			width:item.mLeft == 0?'650rpx':'400rpx',
			height:item.mLeft == 0?'650rpx':'400rpx',
			left:item.mLeft == 0?'25%':'43%',
			opacity:item.mLeft == 0?'1':'0.4',}]" :data-direction="direction">
						<view class="swiper-item">
							<image :src="item.adimage" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="w100" style="color: #B86729;position: absolute;text-align: center;top: 45%;font-size: 32rpx;">
				拥有个数:{{account}}
				<view class="flex-between padding-top-30 padding-left-60 padding-right-60">
					<view class="fl h-100 w-280">
						<image :src="Imgbase + '/new_goodcase_img2.png'" class="w100 h100" mode="aspectFit"
							@click="opencase(choosegood_id,choosecase_template_desc_id,1)"></image>
					</view>
					<view class="fl h-100 w-280">
						<image :src="Imgbase + '/new_goodcase_img3.png'" class="w100 h100" mode="aspectFit"
							@click="opencase(choosegood_id,choosecase_template_desc_id,5)"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-top-50 padding-bottom-50 overhid" style="width: 96%;margin-left: 2%;"
			:style="{background:'url('+Imgbase+'/new_goodcase_img4.png)','background-size':'100% 100%',}">
			<scroll-view scroll-y style="width: 98%;margin-left: 5%;;height: 600rpx;">
				<block v-for="(item,index) in goodinfo.extroinfo">
					<block v-for="(item_s,index_s) in item.goodinfo">
						<view style="width: 28%;height: 305upx;margin-right: 4%;margin-top: 3%;position: relative;"
							class="fl"
							:style="{background:'url('+Imgbase+'/new_goodbp_img8.png) no-repeat','background-size':'100% 100%'}">
							<view class="w100 h-200">
								<image mode="aspectFill" class="w100 h100"
									style="border-radius: 20upx;overflow: hidden;border: 4rpx solid #8A5E51;"
									:src="item_s.goodmes.adimage"></image>
							</view>
							<view class="padding-left-10 w100 two-line font-24 h-60">
								{{item_s.goodmes.name}}
							</view>
							<view class="font-20 padding-left-10">
								获得概率:{{Number(item_s.point/goodinfo.point*100).toFixed(2)}}%
							</view>
							<view style="position: absolute;right:2%;top: 4%;">
								<image :src="Imgbase + '/1case_reword_sss.png'" style="width: 108upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 35"></image>
								<image :src="Imgbase + '/1case_reword_ssr.png'" style="width: 108upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 31"></image>
								<image :src="Imgbase + '/1case_reword_sr.png'" style="width: 80upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 32"></image>
								<image :src="Imgbase + '/1case_reword_sp.png'" style="width: 80upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/1case_reword_r.png'" style="width: 50upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 21"></image>
								<image :src="Imgbase + '/1case_reword_n.png'" style="width: 50upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 17"></image>
								<image :src="Imgbase + '/1case_reword_m.png'" style="width: 50upx;height: 45upx;"
									mode="widthFix" v-if="item.reword_type_id == 16"></image>
							</view>
						</view>
					</block>
				</block>
				<view style="clear: both;"></view>
			</scroll-view>
		</view>
		
		<view class="h-120">
			
		</view>


		
		<view class="cu-modal" :class="modalName=='getrewordmodel'?'show':''" style="backdrop-filter: blur(15px);"
			@tap="hideModal">
			<view class="cu-dialog" style="width: 740rpx;height: 930upx;"
				:style="{background:'url('+Imgbase+'/case_getreword.png)','background-size':'100% 100%',}">
				<view style="width: 100%;height: 200upx;"></view>
				<view class=""
					style="width: 80%;margin-left: 7%;margin-top: 10%;display: flex;flex-wrap: wrap;justify-content: center;">
					<block v-for="(item,index) in rewords">
						<view style="width: 40%;height: 185upx;margin-left: 5%;margin-top: 10%;position: relative;"
							class="" v-if="rewords.length == 1">
							<view style="margin-left: 0%;padding-top: 16upx;position: relative;">
								<image mode="widthFix" style="width: 400rpx;" :src="item.adimage"></image>
							</view>
							<view style="position: absolute;right:-2%;top: 8%;">
								<image :src="Imgbase + '/1case_reword_sss.png'" style="width: 64upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 35"></image>
								<image :src="Imgbase + '/1case_reword_ssr.png'" style="width: 64upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 31"></image>
								<image :src="Imgbase + '/1case_reword_sr.png'" style="width: 50upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 32"></image>
								<image :src="Imgbase + '/1case_reword_sp.png'" style="width: 50upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/1case_reword_r.png'" style="width: 35upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 21"></image>
								<image :src="Imgbase + '/1case_reword_n.png'" style="width: 35upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 17"></image>
								<image :src="Imgbase + '/1case_reword_m.png'" style="width: 35upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 16"></image>
							</view>
						</view>
						<view style="width: 25%;height: 185upx;margin-left: 5%;margin-top: 10%;position: relative;"
							class="" v-if="rewords.length == 5">
							<view style="margin-left: 0%;padding-top: 16upx;position: relative;">
								<image mode="widthFix" style="width: 400rpx;" :src="item.adimage"></image>
							</view>
							<view style="position: absolute;right:-2%;top: 8%;">
								<image :src="Imgbase + '/1case_reword_sss.png'" style="width: 54upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 35"></image>
								<image :src="Imgbase + '/1case_reword_ssr.png'" style="width: 54upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 31"></image>
								<image :src="Imgbase + '/1case_reword_sr.png'" style="width: 40upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 32"></image>
								<image :src="Imgbase + '/1case_reword_sp.png'" style="width: 40upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/1case_reword_r.png'" style="width: 25upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 21"></image>
								<image :src="Imgbase + '/1case_reword_n.png'" style="width: 25upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 17"></image>
								<image :src="Imgbase + '/1case_reword_m.png'" style="width: 25upx;height: 22upx;"
									mode="widthFix" v-if="item.reword_type_id == 16"></image>
							</view>
						</view>
					</block>
				</view>
				<view style="clear: both;"></view>
			</view>
			<image @click="hideModal" :src="Imgbase + '/case_getreword_btn.png'"
				style="width: 30%;position: absolute;right: 35%;top: 83%;" mode="widthFix">
			</image>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				loadModal: false,
				swiperList: [],
				towerStart: 0,
				direction: '',
				account: 0,
				name: '',
				goodinfo: [],
				modalName: null,
				scroll: 1,
				choosegood_id: 0,
				choosecase_template_desc_id: 0,
				rewords: [],
			};
		},
		onLoad(options) {
			/*setTimeout(()=>{
				this.scroll = 81;
				console.log(this.scroll);
			},2000)*/
		},
		onShow() {
			this.loadlist(1);
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			oldlist(e) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Caseways/caseList',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							let list = res.data.data.list;
							for (let i = 0; i < list.length; i++) {
								// _this.account = list[i].num;
								_this.swiperList[i].num = list[i].num
							}
							_this.$forceUpdate()
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			opencase(goods_id, case_template_desc_id, num) {
				let _this = this;
				if (_this.loadModal == true) {
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认要开启' + num + '次宝箱吗',
					success: function(res) {
						if (res.confirm) {
							if (num > _this.account) {
								uni.showToast({
									icon: 'none',
									title: '开启数量大于拥有数量'
								});
								return;
							}
							uni.request({
								url: _this.$globals.apibase + '/api/Caseways/openCase',
								data: {
									token: uni.getStorageSync('token'),
									goods_id: goods_id,
									case_template_desc_id: case_template_desc_id,
									num: num,
								},
								method: 'POST',
								header: {
									'content-type': 'application/json'
								},
								success: (res) => {
									if (res.data.code == '401') {
										uni.setStorageSync('token', '');
										_this.$uniApi.trylogin();
									}
									if (res.data.code == '1') {
										_this.rewords = JSON.parse(res.data.data.logs);
										console.log(_this.rewords)
										_this.modalName = 'getrewordmodel';
										_this.account -= num;
										for (let i = 0; i < _this.swiperList.length; i++) {
											if (_this.swiperList[i].goods_id == goods_id) {
												_this.swiperList[i].num -= num;
											}
										}
									}
									if (res.data.code == '0') {
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										});
									}
								}
							});
						} else if (res.cancel) {}
					}
				});
			},
			hideModal(e) {
				this.modalName = null
				this.oldlist()
			},
			getMes() {
				for (let i = 0; i < this.swiperList.length; i++) {
					if (this.swiperList[i].mLeft == 0) {
						this.account = this.swiperList[i].num;
						this.name = this.swiperList[i].name;
						this.goodinfo = this.swiperList[i].mes;
						this.choosegood_id = this.swiperList[i].goods_id;
						this.choosecase_template_desc_id = this.swiperList[i].case_template_desc_id;
					}
				}
			},
			// towerSwiper
			// 初始化towerSwiper
			loadlist(e) {
				let _this = this;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase + '/api/Caseways/caseList',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							let list = res.data.data.list;
							for (let i = 0; i < list.length; i++) {
								list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list
									.length / 2))
								list[i].mLeft = i - parseInt(list.length / 2)
							}
							_this.swiperList = list
							console.log(this.swiperList)
							_this.getMes()
							_this.$forceUpdate()
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},
			// towerSwiper计算方向
			TowerMove(e) {
				console.log(e)
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.getMes()
				this.swiperList = this.swiperList
			},
		},
		onReachBottom() {},
	}
</script>

<style>
	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 20));
		margin-left: calc(var(--left) * 280upx - 150upx);
		z-index: var(--index);
	}
</style>